<template>
  <div class="more-action">
    <!-- 状态一 -->
    <van-cell-group v-if="!isReport">
      <van-cell @click="hUnLike">不感兴趣</van-cell>
      <van-cell is-link @click="isReport = true">反馈垃圾内容</van-cell>
      <van-cell>拉黑作者</van-cell>
    </van-cell-group>
    <!-- 状态二 反馈-->
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport = false">返回</van-cell>
      <van-cell is-link @click="showPopup">{{ question.label }}</van-cell>
      <van-dialog
        v-model="show"
        :show-cancel-button="true"
        :before-close="beforeClose"
      >
        <div
          style="
            width: 100%;
            height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
          "
        >
          <span
            style="
              width: 100%;
              height: 30px;
              font-size: 20px;
              color: #ffffff;
              font-weight: bold;
              text-align: center;
              background-color: #37aaea;
            "
            >其他问题</span
          >
          <van-field
            v-model="val"
            placeholder="请输入举报内容"
            clearable
            autosize
            type="textarea"
            rows="1"
            maxlength="230"
            show-word-limit
          />
        </div>
      </van-dialog>
      <!-- </van-popup> -->
      <van-cell
        v-for="item in Reports"
        @click="hReport(item.value)"
        :key="item.value"
      >
        {{ item.label }}
      </van-cell>
      <!-- <van-cell>色情</van-cell>
      <van-cell>暴力</van-cell>
      <van-cell>低俗</van-cell>
      <van-cell>不适</van-cell>
      <van-cell>错误</van-cell>
      <van-cell>其他</van-cell> -->
    </van-cell-group>
  </div>
</template>

<script>
import Reports from '@/constant/report.js'
import { otherReport } from '@/api/article.js'
export default {
  name: 'MoreAction',
  props: ['articleId'],
  data () {
    return {
      isReport: false,
      Reports,
      show: false, // 默认关闭其它问题的弹出层
      val: '', // 保存用户输入其它问题数据
      question: {
        value: 0,
        label: '其它问题'
      }
    }
  },
  methods: {
    hUnLike () {
      // 向父组件抛出事件
      this.$emit('un-like')
    },
    hReport (type) {
      this.$emit('report', type)
    },
    showPopup () {
      this.show = true
    },
    remarksExamClick: function (item) { // 点击事件 - 是否加载备注框组件 - 题目备注
      console.log(item)
    },
    async beforeClose (action, done) { // 点击事件 - 备注按钮提示框
      if (action === 'confirm') {
        // 点击确认
        // console.log('[点击事件 - 备注] - 确认')
        await otherReport(this.articleId, String(this.question.value), this.val)
        // 删除文章 和 关闭弹窗并清空用户输入的val值（都通过该事件抛出给父组件）
        this.$emit('close-showAction', this.articleId)
        this.val = ''
        done() // 关闭提示框
      } else if (action === 'cancel') { // 取消
        // console.log('[点击事件 - 备注] - 取消')
        done() // 关闭提示框
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
